<!-- 
 * @Author: guanpf 992093924@qq.om
 * @Date: 2023-07-21 10:07:47
 * @LastEditTime: 2023-10-14 20:32:06
 * @LastEditors: guanpf
 * @Description: 
 * @FilePath: /ZCGL_WX/src/views/main/asset/components/search.vue
 -->
<template>
  <div class="search">
    <group>
      <x-input
        v-model="name"
        @on-enter="searchFun"
        :placeholder="placeholder"
        :show-clear="true"
        @on-click-clear-icon="clear"
      >
        <!-- <x-icon slot="label" type="ios-search" class="icon-red"></x-icon> -->
      </x-input>
    </group>
    <div></div>
  </div>
</template>

<script>
import { Group, XInput } from "vux";
export default {
    props:{
        placeholder:{
            type:String,
            default:'请输入'
        }
    },
  components: {
    Group,
    XInput,
  },
  data() {
    return {
      name: "",
    };
  },
  methods: {
    searchFun() {
      this.$emit("searchFun", this.name);
    },
    clear(){
      this.name = ''
      this.$emit("clearSearch")
    }
  },
};
</script>

<style lang="less">
.search {
  .weui-cells {
    background: transparent;
  }
  .weui-cells:before,
  .weui-cells:after {
    display: none;
  }
  // .weui-icon-clear{
  //   display: inline-block !important;
  // }
  .vux-x-input {
    background: #f1f1f1;
    margin: 0 20px;
    height: 32px;
    min-height: 32px;
    border-radius: 20px;
    font-size: 14px;
    .weui-cell__bd {
      margin-left: 0px;
    }
    .weui-cell__hd {
      svg {
        width: 18px;
        height: 18px;
      }
    }

    .vux-x-icon {
      margin-top: 7px;
    }
  }
}
</style>
